import React from 'react'
import styles from './index.module.scss'
import MyNavBar from '../../components/MyNavBar'
import { getCurrentCity } from '../../utils/city'
import { getOverlaysById, getHouseList } from '../../api/map'
import { Toast } from 'antd-mobile'
import HouseItem from '../../components/HouseItem'
import classNames from 'classnames'
const BMap = window.BMap
// 圆形覆盖物的样式：
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255, 0, 0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255, 255, 255)',
    textAlign: 'center'
}
export default class Map extends React.Component {
    constructor() {
        super()
        this.state = {
            houseList: null,
            isShow: false
        }
    }
    initMap = async () => {
        if (!BMap) return
        const { label, value } = await getCurrentCity()
        // 创立地图实例
        this.map = new BMap.Map('container')
        // 点击地图上某点隐藏房屋列表
        this.map.addEventListener('touchstart', () => {
            this.setState({
                isShow: false
            })
        })
        // 创建地址解析实例
        var myGeo = new BMap.Geocoder()
        // 将地址解析
        myGeo.getPoint(label,
            point => {
                if (point) {
                    // 中心点和缩放级别
                    this.map.centerAndZoom(point, 11)
                    // 显示一级覆盖物
                    this.renderOverlays(value)
                }
            }, label)
        // 设置经纬度
        // var point = new BMap.Point(116.4, 39.9)
        // 设置中心点和缩放级别
        // map.centerAndZoom(point, 15)
        // map.setCurrentCity(label)
    }
    // 获取要渲染的覆盖物的类型('circle'、'rect')
    // nextZoom代表点击之后要放大的级别
    getRenderOverlayTypeAndNextZoom = () => {
        const currentZoom = this.map.getZoom()
        // console.log(currentZoom)
        let type = 'circle'
        let nextZoom = 13
        if (currentZoom > 10 && currentZoom < 12) {
            type = 'circle'
            nextZoom = 13
        } else if (currentZoom > 12 && currentZoom < 14) {
            type = 'circle'
            nextZoom = 15
        } else if (currentZoom > 14) {
            type = 'rect'
        }
        return { type, nextZoom }
    }
    // 渲染各级覆盖物方法
    renderOverlays = async id => {
        Toast.loading('数据加载中>->->', 0)
        const res = await getOverlaysById(id)
        Toast.hide()
        const { type, nextZoom } = this.getRenderOverlayTypeAndNextZoom()
        // console.log(type, nextZoom)
        res.data.body.forEach(item => {
            if (type === 'circle') {
                this.renderCircleOverlay(item, nextZoom)
            } else {
                this.renderRectOverlay(item)
            }

        })
    }
    // 渲染一、二级覆盖物的方法
    renderCircleOverlay = ({
        coord: { latitude, longitude },
        count,
        label: name,
        value: id
    }, nextZoom) => {
        // console.log(latitude, longitude, count, name, id)
        // 设置覆盖物的经纬度,前面是经度，后面是纬度
        var point = new BMap.Point(longitude, latitude)
        var opts = {
            position: point, // 指定文本标注所在的地理位置
            offset: new BMap.Size(-35, -35) //设置文本偏移量
        }
        var label = new BMap.Label('', opts) // 创建文本标注对象

        label.setContent(
            `<div class=${styles.bubble}><p class=${styles.name}>${name}</p><p class=${styles.name}>${count}套</p></div>`
        )
        label.setStyle(labelStyle)
        label.addEventListener('click', () => {
            // console.log(name)
            // 清除已有覆盖物
            setTimeout(() => {
                this.map.clearOverlays()
            }, 0)

            // 更改地图中心点和缩放级别
            this.map.centerAndZoom(point, nextZoom)
            // 调用renderOverlays，去加载点击覆盖物下面的二级覆盖物的数据
            this.renderOverlays(id)
        })
        // 把覆盖物添加到地图上
        this.map.addOverlay(label)
    }
    // 渲染地三级覆盖物
    renderRectOverlay = ({
        coord: { latitude, longitude },
        count,
        label: name,
        value: id
    }) => {

        var point = new BMap.Point(longitude, latitude)
        var opts = {
            position: point, // 指定文本标注所在的地理位置
            offset: new BMap.Size(-50, -20) //设置文本偏移量
        }
        var label = new BMap.Label('', opts) // 创建文本标注对象
        label.setContent(`
            <div class=${styles.rect}>
                <span class=${styles.housename}>${name}</span>
                <span class=${styles.housenum}>${count}套</span>
            </div>
        `)
        label.setStyle(labelStyle)
        // 把覆盖物添加到地图上
        this.map.addOverlay(label)
        label.addEventListener('click', e => {
            // console.log(e)
            // 没有点击到
            if (!e.changedTouches && !e.changedTouches[0]) return
            // 移动到视图中间
            const { clientX, clientY } = e.changedTouches[0]
            const moveX = window.screen.width / 2 - clientX
            const moveY = window.screen.height / 2 - clientY - 330 / 2
            this.map.panBy(moveX, moveY) // 移动距离
            // 调用方法获取点击的覆盖物的房源列表数据
            this.getHouseListData(id)
        })
    }
    getHouseListData = async (id) => {
        const res = await getHouseList(id)
        console.log('getHouseListr', res)
        this.setState({
            houseList: res.data.body.list,
            isShow: true
        })
    }
    componentDidMount() {
        this.initMap()
    }
    // 渲染房屋列表
    renderHouseList = () => {
        const { isShow, houseList } = this.state
        return (
            <div className={classNames(styles.houseList, { [styles.show]: isShow })}>
                <div className={styles.titleWrap}>
                    <h1 className={styles.listTitle}>房屋列表</h1>
                    <a className={styles.titleMore} href='#/layout/houselist'>
                        更多
                    </a>
                </div>
                <div className={styles.houseItems}>
                    {houseList.map(item => {
                        return <HouseItem key={item.houseCode} {...item} />
                    })}
                </div>
            </div>
        )
    }
    render() {
        const { houseList } = this.state
        return (
            <div className={styles.map}>
                <MyNavBar>地图找房</MyNavBar>
                <div id='container'></div>
                {houseList && this.renderHouseList()}
            </div>
        )
    }
}